<template>
    <div>
        <el-card class="!border-none" shadow="never">
            <div style="display: flex; flex-direction: row; justify-content: space-between; align-items: center">
                <el-page-header
                        content="视频库"
                        @back="$router.back()"
                />
<!--                <div>-->
<!--                    <input id="file" type="file" />-->
<!--                    <button id="upload"></button>-->
<!--                </div>-->
                <el-upload
                    action=""
                    :show-file-list="false"
                    :accept="'.video,.mp4'"
                    :http-request="handleChange"
                >
                    <el-button slot="trigger" type="primary">上传视频</el-button>
                </el-upload>
            </div>
        </el-card>
        <el-card class="!border-none mt-4" shadow="never">
            <el-table
                    size="large"
                    :data="pager.lists"
                    @selection-change="handleSelectionChange"
                    style="width: 100%"
            >
                <!--                    <el-table-column type="selection" width="60" />-->
                <el-table-column label="视频详情" prop="channel_id" min-width="220">
                    <template #default="{ row }">
                        <div style="display:flex; flex-direction: column">
                            <div>
                                <span>视频ID：</span>
                                <span style="color: #2494f2">{{row.record_mode_video_id}}</span>
                            </div>
                            <div>
                                <span>视频名称：</span>
                                <span style="color: #2494f2">{{row.record_mode_video_name}}</span>
                            </div>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="封面地址" min-width="120">
                    <template #default="{ row }">
                        <div class="flex items-center">
                            <div>
                                <el-avatar :src="liveVideo" style="height: 60px; min-width: 60px"/>
                            </div>
                        </div>
                    </template>
                </el-table-column>
<!--                <el-table-column label="视频地址" min-width="200">-->
<!--                    <template #default="{ row }">-->
<!--&lt;!&ndash;                        :width="'200px'" :height="'200px'"&ndash;&gt;-->
<!--                        <VideoPlayer :src="row.video_url" :height="'200px'"></VideoPlayer>-->
<!--                    </template>-->
<!--                </el-table-column>-->
                <el-table-column label="时长" min-width="120">
                    <template #default="{ row }">
                        {{row.duration}}
                    </template>
                </el-table-column>
                <el-table-column label="占用空间大小" min-width="100">
                    <template #default="{ row }">
                        {{row.space_used}}
                    </template>
                </el-table-column>
                <el-table-column label="视频关联活动数量" min-width="100">
                    <template #default="{ row }">
                        {{row.relation_num}}
                    </template>
                </el-table-column>
            </el-table>
            <!-- 分页 -->
<!--            <div class="flex justify-end mt-4">-->
<!--                <pagination v-model="pager" @change="getLists" />-->
<!--            </div>-->
        </el-card>
    </div>
</template>
<script lang="ts" setup>
    import { usePaging } from '@/hooks/usePaging'
    import {MzGetVideoList, MzGetUploadToken,MzCreateUploadVideo} from '@/api/live'
    import feedback from '@/utils/feedback'
    import {ref, reactive} from "vue";
    import OSS from 'ali-oss';
    import liveVideo from '@/assets/images/liveVideo.png'
    import { getRoutePath } from '@/router'

    const queryParams = reactive({
        limit: 9999
    });

    //分页处理
    const { pager, getLists } = usePaging({
        fetchFun: MzGetVideoList,
        params: queryParams
    });

    getLists();


    const getOssClient = (res:any) => {
        // 配置OSS客户端
        return new OSS({
            // yourRegion填写Bucket所在地域。以华东1（杭州）为例，yourRegion填写为oss-cn-hangzhou。
            region: res.config.region,
            // 从STS服务获取的临时访问密钥（AccessKey ID和AccessKey Secret）。
            accessKeyId: res.config.accessKeyId,
            accessKeySecret: res.config.accessKeySecret,
            // 从STS服务获取的安全令牌（SecurityToken）。
            stsToken: res.config.stsToken,
            // 填写Bucket名称。
            bucket: res.config.bucket,
        });
    };


    const upload = document.getElementById("upload");
    const handleChange = async (file) => {
        try {
            // 填写Object完整路径。Object完整路径中不能包含Bucket名称。
            // 您可以通过自定义文件名（例如exampleobject.txt）或文件完整路径（例如exampledir/exampleobject.txt）的形式实现将数据上传到当前Bucket或Bucket中的指定目录。
            // data对象可以自定义为file对象、Blob数据或者OSS Buffer。
            MzGetUploadToken().then(async (res) =>  {
                console.log(file)
                console.log(res)
                const client = await getOssClient(res);
                const options = {
                    meta: { temp: "demo" },
                    mime: "json",
                    headers: { "Content-Type": "text/plain" },
                };
                const result = await client.put(`${res.directory}/${res.video_name}.mp4`, file.file, options);
                let params = {
                    file_name: file.file.name,
                    video_name: res.video_name,
                    file_size: file.file.size
                };
                await MzCreateUploadVideo(params);
                feedback.msgSuccess('上传成功！');
                getLists()
            });
        } catch (e) {
            console.log(e);
        }
    }

    // upload.addEventListener("click", () => {

        // const data = file.files[0];
        // putObject(data);
    // });

    // upload.addEventListener("click", () => {
    //     const data = file.files[0];
    //     putObject(data);
    // });


    //
    // let uploadUrl = '';
    // const beforeUpload = async () => {
    //     let params = {
    //         file_name: myref.value.fileList[0].raw.name,
    //         video_name: uploadConfig.video_name,
    //         file_size: myref.value.fileList[0].size
    //     };
    //     await MzCreateUploadVideo(params);
    //     feedback.msgSuccess('上传成功！');
    //     getLists()
    //
    // };

    // const myref = ref(null)
    // const actionImg = async () => {
    //     let params = {
    //         file_name: myref.value.fileList[0].raw.name,
    //         video_name: uploadConfig.video_name,
    //         file_size: myref.value.fileList[0].size
    //     };
    //     await MzCreateUploadVideo(params);
    //     feedback.msgSuccess('上传成功！');
    //     getLists()
    //
    // };
</script>
<style lang="scss" scope>
</style>
